<template>
  <div class="content">
    <div class="title">
      <span>{{ this.message.categoryName }}</span>
      <span class="class-list">
        <ul>
          <li
            v-for="item in list"
            :key="item.id"
            :class="item.id == 1 ? 'active' : ''"
          >
            <a href="#">{{ item.name }}</a>
          </li>
        </ul>
      </span>
    </div>
    <div class="bottom-content">
      <div class="left1" v-if="this.message.categoryPicture2 === null">
        <a href="#">
          <img
            :src="'http://www.codeedu.com.cn/' + this.message.categoryPicture1"
            alt=""
          />
        </a>
      </div>
      <div
        class="bottom-content-left"
        v-if="this.message.categoryPicture2 !== null"
      >
        <a href="#">
          <img
            :src="'http://www.codeedu.com.cn/' + this.message.categoryPicture1"
            alt=""
          />
        </a>
        <a href="#">
          <img
            :src="'http://www.codeedu.com.cn/' + this.message.categoryPicture2"
            alt=""
          />
        </a>
      </div>

      <div class="grid-list">
        <SingleCard @click.native="getInfo(item)" v-for="item in this.message.products" :res="item" :key="item.productId"/>
        <MoreScan />
      </div>
    </div>
  </div>
</template>

<script>
import SingleCard from "./SingleCard.vue";
import MoreScan from "./MoreScan.vue";
export default {
  name: "HomeMachine2",
  props: {
    message: {
      type: Object,
    },
  },
  data() {
    return {
      list: [
        { id: 1, name: "热门" },
        { id: 2, name: "电视影音" },
      ],
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    getInfo(item){
      this.$router.push({
        path:`/all-store/details/${item.productId}`
      })
    }
  },
  components: { SingleCard, MoreScan },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  height: 676px;
  margin: 0 auto;
  .title {
    height: 34px;
    padding: 24px 0px 12px;
    font-size: 22px;
    color: #333333;
    .class-list {
      float: right;
      ul {
        margin-top: 16px;
        display: flex;

        li {
          margin-right: 24px;
          height: 20px;
          font-size: 16px;
          a {
            color: #333333;
          }
        }
      }
    }
  }
  .active {
    a {
      color: #ff6700 !important;
    }
    border-bottom: 2px solid #ff6700;
  }
  .grid-list {
    display: grid;
    grid: repeat(2, 300px) / repeat(4, 232px);
    gap: 14px 10px;
  }

  .bottom-content {
    display: flex;
    width: 242px;
    height: 614px;

    a:hover {
      cursor: pointer;
      box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.1),
        5px 0px 5px 0px rgba(0, 0, 0, 0.1), 0px 10px 25px 0px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    .left1 {
      margin-right: 10px;
      width: 232px;
      height: 614px;
      a {
        display: block;
        width: 232px;
        height: 614px;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
    .bottom-content-left {
      display: flex;
      flex-flow: column;
      a {
        display: block;
        margin-right: 10px;
        width: 232px;
        height: 300px;
        margin-top: 14px;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      a:nth-child(1) {
        margin-top: 0px;
      }
    }
  }
}
</style>
